<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js 运动--单物体运动</title>
    <style type="text/css">
#div1{
    width: 100px;height: 100px;
    background-color: #99CCCC;
    position: absolute;
    left:0;
}

#div2{
    width: 150px;
    height: 200px;
    background-color: #CCFFFF;
    position: absolute;
    left:-150px;
}
#div2 span{
    position: absolute;
    width: 20px;
    height: 60px;
    line-height: 20px;
    background-color: #FFCCCC;
    right: -20px;
    top:50%;
    margin-top:-30px;
}
#div3{
    width: 100px;height: 100px;
    background-color: red;
    filter:alpha(opacity:30);
    opacity: 0.3;
}
#div4{
    width: 100px;height: 100px;
    background-color: #99CCCC;
    position: absolute;
    /*left:600px;*/
    left:;0
}
#pole{
    width: 1px; height: 100px;
    background-color: black;
    position: absolute;
    left:300px;
}
#div5{
    width: 100px;height: 150px;
    background-color: #CCFFFF;
    position: absolute;
    right:0;
    bottom:0;
}
#div6{
    width: 100px;height: 150px;
    background-color: #FFCCCC;
    position: absolute;
    right:0;
    bottom:0;
}
#div7{
    width: 100px;height: 100px;
    background-color: #FFCCCC;
    position: absolute;
    left:300px;
}
#pole100{
    width: 1px; height: 100px;
    background-color: black;
    position: absolute;
    left:100px;
}
#pole600{
    width: 1px; height: 100px;
    background-color: black;
    position: absolute;
    left:600px;
}
    </style>
</head>
<body>

<h2>运动框架</h2>
<input id="btn1" type="button" value="开始运动" onclick="startMove1();">
<div id="div1"></div>


<hr style="margin-top:120px;">
<h2>"分享到"侧边栏</h2>
<div id="div2">
    <span>分享到</span>
</div>

<hr style="margin-top:240px;">
<h2>淡入淡出</h2>
<div id="div3"></div>

<hr>
<h2>缓冲运动</h2>
<input id="btn4" type="button" value="开始运动" onclick="startMove4();">
<input id="btn4" type="button" value="停止运动" onclick="stopMove4();">
<div id="div4"></div>
<div id="pole"></div>


<hr style="margin-top:140px;">
<h2>右下角缓冲悬浮框</h2>
<div id="div5">右下角缓冲悬浮框</div>

<hr>
<h2>跟随页面滚动的缓冲侧边栏</h2>
<div id="div6">跟随页面滚动的缓冲侧边栏</div>

<hr>
<h2>匀速运动的停止条件</h2>
<input id="input100" type="button" value="到100" onclick="startMove7(100)">
<input id="input600" type="button" value="到600" onclick="startMove7(600)">
<div id="div7"></div>
<div id="pole100"></div>
<div id="pole600"></div>

<script>



// 运动框架：----------------------------------------------------------------------------------
// 1、在开始运动前，关闭已有定时器
// 2、把运动和停止隔开，if-else
// 3、根据left和iTarget的关系可以推断是速度是正还是负

// 缓冲运动：
// 距离大，速度大
// 距离小，速度小 
// var speed = (300-oDiv4.offsetLeft)/10;
// speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 如果有除2操作，所以iTarget有可能出现小数的情况,例如720.5，oDiv6会一直在721px和720px范围上下抖动;

// 匀速运动的停止条件
// if(Math.abs(iTarget - oDiv7.offsetLeft)<7){
//     clearInterval(timer7);
//     oDiv7.style.left = iTarget + 'px';
// }


var timer1 = null;
function startMove1(){
    var speed = 1;
    var oDiv1 = document.getElementById("div1");

    // 发现在运动的过程中，连续点击btn1,div1会运动的越来越快，原因是每点击一次就开一个定时器。
    // 解决办法是每次开定时器前，先清除上一次的定时器
    clearInterval(timer1);
    timer1 = setInterval(function(){
        console.log(oDiv1.offsetLeft)
        if(oDiv1.offsetLeft >=  300){
            clearInterval(timer1);
            console.log("aa");
        }
        // oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
        //  发现div1停止后，再点btn1, div1依然移动speed个像素，为什么呢，不是已经判断div1的offsetLeft值，清除定时器了吗？
        // 原来，这个clear并不是clear本次的运动，而是clear下次的运动，本次的运动依然还是要完成的。
        // 解决的办法是再套一个else
        else{
            oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
        }
    },30);

}


// "分享到"侧边栏-----------------------------------------------------------------------------
window.onload = function(){
    var oDiv2 = document.getElementById("div2");
    var oDiv3 = document.getElementById("div3");
    oDiv2.onmouseover = function(){
        // startMoveOut();
        // startMoveInOut(10,0);
        startMoveInOut(0);
    }
    oDiv2.onmouseout = function(){
        // startMoveIn();
        // startMoveInOut(-10,-150);
        startMoveInOut(-150);
    }
    oDiv3.onmouseover = function(){
        startMove3(100);
    }
    oDiv3.onmouseout = function(){
        startMove3(30);
    }
}

// 方法一：写两个函数
/*var timer2 = null;
function startMoveOut(){
    var speed = 10;
    var oDiv2 = document.getElementById("div2");
    clearInterval(timer2);
    timer2 = setInterval(function(){
        if(oDiv2.offsetLeft >= 0){
            clearInterval(timer2);
        }else{
            oDiv2.style.left = oDiv2.offsetLeft + speed + 'px';
        }
    },30);
}
function startMoveIn(){
    var speed = 10;
    var oDiv2 = document.getElementById("div2");
    clearInterval(timer2);
    timer2 = setInterval(function(){
        if(oDiv2.offsetLeft <= -150){
            clearInterval(timer2);
        }else{
            oDiv2.style.left = oDiv2.offsetLeft - speed + 'px';
        }
    },30);
}*/


// 方法二：发现两个函数功能相同，来个合并
/*var timer2 = null;
function startMoveInOut(speed, iTarget){
    var speed = speed;
    var oDiv2 = document.getElementById("div2");
    clearInterval(timer2);
    timer2 = setInterval(function(){
        if(oDiv2.offsetLeft == iTarget){
            clearInterval(timer2);
        }else{
            oDiv2.style.left = oDiv2.offsetLeft + speed + 'px';
        }
    },30);
}*/


// 方法三：设定参数speed是没有必要的，根据left和iTarget的关系可以推断是速度是正还是负
// left:30  iTarget:300   速度是正的
// left:600 iTarget:50    速度是负正的
var timer2 = null;
function startMoveInOut(iTarget){
    var speed = 0;
    var oDiv2 = document.getElementById("div2");
    clearInterval(timer2);
    if(oDiv2.offsetLeft < iTarget){
        speed = 10;
    }
    else if(oDiv2.offsetLeft > iTarget){
        speed = -10;
    }
    timer2 = setInterval(function(){
        if(oDiv2.offsetLeft == iTarget){
            clearInterval(timer2);
        }else{
            oDiv2.style.left = oDiv2.offsetLeft + speed + 'px';
        }
    },30);
}


// 淡入淡出-----------------------------------------------------------------------------------------------
var alpha = 30;
var timer3 = null;
function startMove3(iTarget){
    clearInterval(timer3);
    var speed = 0;
    var oDiv3 = document.getElementById("div3");
    if(alpha < iTarget){
        speed = 10;
    }
    else{
        speed = -10;
    }

    timer3 = setInterval(function(){
        if(alpha == iTarget){
            clearInterval(timer3);
        }else{
            alpha += speed;
            oDiv3.style.filter = 'alpha(opacity:'+alpha+')';
            oDiv3.style.opacity = alpha/100;
        }
    },30);

}


// 缓冲运动------------------------------------------------------------------------------------------
// 距离大，速度大
// 距离小，速度小
var timer4 = null;
function startMove4(){
    var oDiv4 = document.getElementById("div4");
    timer4 = setInterval(function(){
        if(oDiv4.offsetLeft == 300){
            clearInterval(timer4);
        }  
        var speed = (300-oDiv4.offsetLeft)/10;
        // var speed = Math.ceil(speed);
        // var speed = Math.floor(speed);
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        oDiv4.style.left = oDiv4.offsetLeft + speed + 'px';
        console.log(oDiv4.offsetLeft,speed,oDiv4.style.left);
    }, 30);
}

function stopMove4(){
    clearInterval(timer4);
}
// console输出的最后几行结果
// 1、从left:0开始运动
// 294 0.7 "293.7px" 
// 295 0.6 "294.6px" 
// 296 0.5 "295.5px" 
// 296 0.4 "296.4px" 
// 实际上，最后物体停止的位置到达不了300
// 可以看出div的偏移offsetLeft对style.left四舍五入后取值
// 最后物体就停在了296的位置；
// 解决办法：var speed = Math.ceil(speed);

// 2、从left:600px开始运动
// 309 -1 "309px"  
// 308 -0.9 "308.1px"  
// 307 -0.8 "307.2px"  
// 306 -0.7 "306.3px"  
// 305 -0.6 "305.4px"  
// 305 -0.5 "304.5px" 
// 解决办法：var speed = Math.floor(speed);



// 右下角缓冲悬浮框----------------------------------------------
// 问题：滚动条滚动的时候，oDiv5会一抖一抖的
/*window.onscroll = function(){
    var oDiv5 = document.getElementById("div5");
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    oDiv5.style.top = document.documentElement.clientHeight - oDiv5.offsetHeight + scrollTop + 'px';
    // document.documentElement.clientHeight:浏览器可视区高度
    // oDiv5.offsetHeight：oDiv5的高度
    // scrollTop:滚动的距离
    console.log(document.documentElement.clientHeight, oDiv5.offsetHeight,scrollTop,oDiv5.style.top);
}*/



// 用运动来解决oDiv抖动的问题
/*var timer5 = null;
function startMove5(iTarget){
    var oDiv5 = document.getElementById("div5");
    clearInterval(timer5);
    timer5 = setInterval(function(){
        var speed = (iTarget - oDiv5.offsetTop)/3;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(oDiv5.offsetTop == iTarget){
            clearInterval(timer5)
        }
        else{
            oDiv5.style.top = oDiv5.offsetTop + speed + 'px';
        }
        console.log(oDiv5.style.top);
    },30);
}
window.onscroll = function(){
    var oDiv5 = document.getElementById("div5");
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var iTarget =  document.documentElement.clientHeight - oDiv5.offsetHeight + scrollTop;
    startMove5(iTarget);
}*/




// 跟随页面滚动的缓冲侧边栏----------------------------
// 问题：滚动条滚动的时候，oDiv6会一抖一抖的
/*window.onscroll = function(){
    var oDiv6 = document.getElementById("div6");
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    oDiv6.style.top = (document.documentElement.clientHeight - oDiv6.offsetHeight)/2 + scrollTop + 'px';
    console.log(document.documentElement.clientHeight, oDiv6.offsetHeight,scrollTop,oDiv6.style.top);
}*/


// 用运动来解决oDiv抖动的问题
var timer6 = null;
function startMove6(iTarget){
    var oDiv6 = document.getElementById("div6");
    clearInterval(timer6);
    timer6 = setInterval(function(){
        var speed = (iTarget - oDiv6.offsetTop)/20;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(oDiv6.offsetTop == iTarget){
            clearInterval(timer6)
        }
        else{
            oDiv6.style.top = oDiv6.offsetTop + speed + 'px';
        }
        // console.log(iTarget,oDiv6.style.top);
    },30);
}
window.onscroll = function(){
    var oDiv6 = document.getElementById("div6");
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // Bug: 速度取整
    // 有除2操作，所以iTarget有可能出现小数的情况,例如720.5，oDiv6会一直在721px和720px范围上下抖动;
    var iTarget =  (document.documentElement.clientHeight - oDiv6.offsetHeight)/2 + scrollTop;
    iTarget = parseInt(iTarget);
    startMove6(iTarget);
}



// 匀速运动的停止条件-------------------------------------
var timer7 = null;
function startMove7(iTarget){
    var oDiv7 = document.getElementById("div7");
    clearInterval(timer7);
    timer7 = setInterval(function(){
        var speed = 0;
        if(oDiv7.offsetLeft < iTarget){
            speed = 7;
        }
        else{
            speed = -7;
        }
        if(Math.abs(iTarget - oDiv7.offsetLeft)<7){
            clearInterval(timer7);
            oDiv7.style.left = iTarget + 'px';
        }
        else{
            oDiv7.style.left = oDiv7.offsetLeft + speed + 'px';
        }
    }, 30);
}

    </script>
</body>
</html>